<template>
  <el-dialog :visible="smsVisible">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="text item">
          可选短信模板
        </div>
        <div
          v-for="item in list"
          :key="item"
          class="text item"
          @click="getMessage(item)"
        >
          {{ item }}
        </div>
      </el-col>
      <el-col :span="18">
        <div>短信内容：</div>
        <el-input v-model="text" type="textarea" />
        <div>
          <el-tag>日期</el-tag>
          <el-tag>收缴率</el-tag>
          <el-tag>催缴率</el-tag>
          <el-tag>周期</el-tag>
          <el-tag>人均效能</el-tag>
          <el-tag>前三名</el-tag>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        取 消
      </el-button>
      <el-button type="primary" @click="sonSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    onSubmit: {
      type: Function,
      default: () => {}
    },
    smsVisible: { 
      type: Boolean,
      default: false
     }
  },
  // props: ['visible'],
  data() {
    return {
      list: [
        '@日期@全国平均收缴率为@收缴率@最低的三个组织为@前三名@',
        '本年度平均催缴率为@催缴率@最低的三个组织为',
        '恭喜，本季度人均效能全部达标！'
      ],
      text: ''
      // dialogvisible: false
    }
  },
  computed: {},
  
  methods: {
    cancel() {
      // 点取消
      this.onSubmit(false)
    },
   sonSubmit() {
    //  点完成
     this.onSubmit(false)
   },
    getMessage(item) {
      this.text = item
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  padding: 0;
}
.el-col-12 {
  width: 250px;
}
.el-textarea {
  width: 100% !important;
}
.text {
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-tag {
  margin: 10px 10px 0 0;
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
